import React from  'react'
import ReactDOM from 'react-dom'
import * as SysRoleAction  from '../../actions/SysRoleAction';
import { connect }  from 'react-redux';

import _ from 'lodash'

import Paging from '../Paging'

class SysBindList extends React.Component {
  constructor(props){
    super(props)

    this.state = {
      data: {},
      role_id: ''
    }
  }

  componentWillReceiveProps(props) {
    if (props.role_id && props.role_id != this.state.role_id ) {
      this.props.dispatch(
        SysRoleAction.SysRoleQueryAsync({
          role_id: props.role_id
        })
      )
      this.setState({
        role_id: props.role_id
      })
    }
  }

  componentDidUpdate() {
    // console.log(this.props.sysusers)
  }

  onPageChange(page) {
    var self = this;
    this.props.dispatch(
      SysRoleAction.SysRoleQueryAsync({
        offset: (page-1)*this.props.limit,
        limit: self.props.limit,
        role_id: self.state.role_id
      })
    )
  }

  onDataSubmit() {
    var data = this.state.data;

    if(this.props.isEdit){
      this.props.onDataUpdate(data);
    }
    else{
      this.props.onDataCreate(data);
    }
  }

  onChange(event,key){
    var value = $(event.target).val();
    var data = this.state.data;
    data[key] = value;
    this.setState({
      data: data
    })
  }

  renderList() {
    var self = this;
    var content = [];
    // console.log(this.props.data)
    if (this.props.data && this.props.data.length > 0) {
      this.props.data.forEach(function(data, index) {
        var sysuser = data.sysuser;
        content.push((
          <tr>
            <td>
              {sysuser.username}
            </td>
            <td>
              {sysuser.firstName+" "+sysuser.lastName}
            </td>
            <td>
              {sysuser.WorkingProperty?sysuser.WorkingProperty.name:""}
            </td>
            <td>
              {sysuser.mobile}
            </td>
            <td>
              {sysuser.email}
            </td>

            <td>
              <a className="delete f-dn" style={{marginLeft: '0px'}} onClick={(event)=>self.onDeleteClick(data)}>删除</a>
            </td>
          </tr>
        ))
      })
    }
    return content
  }

  renderFooter() {
      var self = this;

      var offset = parseInt(this.props.offset),
          limit = parseInt(this.props.limit),
          count = parseInt(this.props.count)
      var current = Math.ceil(offset/limit) + 1;
      return (
        <div className="modal-footer page-footer" >
          <Paging
            current = {current}
            count = {count}
            limit = {limit}
            onPageChange = {this.onPageChange.bind(self)}
          />
        </div>
      )
  }

  render(){

    var self = this;

    var offset = parseInt(this.props.offset),
        limit = parseInt(this.props.limit),
        count = parseInt(this.props.count)
    var current = Math.ceil(offset/limit) + 1;

    return (
      <div className="modal fade" id="SysRoleEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="demo-modal-label">绑定账户</h4>
            </div>
            <div className="modal-body">
              <div className="Background-setting-list setting-list">
                <table className="table">
                  <thead>
                    <tr className="table-title">
                      <th>管理员</th>
                      <th>姓名</th>
                      <th>小区物业</th>
                      <th>手机号</th>
                      <th>邮箱</th>
                      <th className="f-dn">编辑</th>
                    </tr>
                  </thead>
                  <tbody>
                    {this.renderList()}
                  </tbody>
                </table>
              </div>
              {self.renderFooter()}
            </div>
          </div>
        </div>

      </div>


    )
  }

}

const mapStateToProps = (state, ownProps) => {
  // console.log(state.sysUsers)
  return {
    sysusers: state.sysUsers,
    data: state.sysUsers.data,
    offset: state.sysUsers.offset,
    limit: state.sysUsers.limit,
    count: state.sysUsers.count
  }
}

export default connect(mapStateToProps)(SysBindList);
